{% extends 'base/base.html' %}
{% block content %}
    <div class="row" style="margin-top: 10px">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="btn btn-sm btn-success add-btn">添加用户</div>
                    {#<form>#}
                    <div class="box-tools">
                        <div class="input-group input-group-sm" style="width: 150px;">
                            <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">
                            <div class="input-group-btn">
                                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                    {#</form>#}
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover">
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>邮箱</th>
                            <th>职位</th>
                            <th>管理员</th>
                            <th>在职</th>
                            <th>部门</th>
                            <th>手机号</th>
                            <th>操作</th>
                        </tr>
                        {% for user in userList %}
                            <tr>
                                <td>{{ user.pk }}</td>
                                <td>{{ user.name }}</td>
                                <td>{{ user.email }}</td>
                                <td>{{ user.get_role_display }}</td>
                                <td>{{ user.get_is_admin_display }}</td>
                                <td>{{ user.get_is_unable_display }}</td>
                                <td>{{ user.department|default:"未填写" }}</td>
                                <td>{{ user.phone|default:"未填写" }}</td>
                                <td>
                                    <div data-url="{% url 'userEdit' user.pk %}" class="btn btn-sm btn-warning edit_btn"
                                         id="edit_btn">编辑
                                    </div>
                                    <div data-url="{% url 'userDel' user.pk %}" class="btn btn-sm btn-danger del_btn"
                                         id="del_btn">删除
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <ul class="pagination">{{ page_html }}</ul>
            <!-- /.box -->
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $("#user_list").addClass("active")
        $(".add-btn").on("click", function () {
            ui.box({
                title: "添加用户",
                remote:{% url 'userAdd' %},
            })
        })

        $(".edit_btn").on("click", function () {
            url = $(this).attr("data-url")
            console.log("url=", url)
            ui.box({
                title: "编辑用户",
                remote: url
            })
        })

        $(".del_btn").on("click", function () {
            url = $(this).attr("data-url")
            console.log("url=", url)
            ui.confirm("确认删除此用户吗？", function () {
                Net.get({
                    url: url,
                    reload: true
                })
            })
        })
    </script>
{% endblock %}
